<template>
    <div class="Schoose">
      <div class="Schoose-body">
        <div class="popuptitle">
          <div><i class="iconfont icon-xinjian"></i>过滤条件设置</div>
          <div class="switch">
            <div class="shut" @click="narrow('shut')"><i class="iconfont icon-chacha"></i></div>
          </div>
        </div>
        <div class="Scb">
          <div class="Scb-top">
            <div class="scbt-left">
              <div class="stitle">已选中数据表字段：</div>
              <div class="sview">
                <vxe-table
                  show-overflow
                  size="mini"
                  ref="xTree1"
                  :show-header="false"
                  :tree-config="{}"
                  @cell-dblclick="rowclick"
                  :data="LData"
                >
                  <vxe-column field="title" tree-node></vxe-column>
                </vxe-table>
              </div>
            </div>
            <div class="scbt-middle">
                <div class="tpesun2-m-buttons">
                  <div class="t">
                    <span class="t1" @click="filterText=filterText+' + '">+</span>
                    <span class="t1" @click="filterText=filterText+' - '">-</span>
                    <span class="t1" @click="filterText=filterText+' * '">*</span>
                    <span class="t1" @click="filterText=filterText+' / '">/</span>
                    <span class="t1" @click="filterText=filterText+' > '">&gt;</span>
                    <span class="t1" @click="filterText=filterText+' >= '">&gt;=</span>
                    <span class="t1" @click="filterText=filterText+' = '">=</span>
                    <span class="t1" @click="filterText=filterText+' <= '">&lt;=</span>
                    <span class="t1" @click="filterText=filterText+' < '">&lt;</span>
                    <span class="t1" @click="filterText=filterText+' \'\' '">&quot;</span>
                    <span class="t1" @click="filterText=filterText+' () '">( )</span>
                    <span class="t1"  @click="filterText=filterText+' () '">&lt;&gt;</span>
                  </div>
                 <div class="t">
                   <span class="t2"  @click="filterText=filterText+' and '">并且</span>
                   <span class="t2"  @click="filterText=filterText+' or '">或者</span>
                   <span class="t2"  @click="filterText=filterText+' in() '">属于</span>
                   <span class="t2"  @click="filterText=filterText+' like \'%%\' '">形如</span>
                   <span class="t2"  @click="filterText=filterText+' not in () '">不属于</span>
                   <span class="t2"  @click="filterText=filterText+' not like \'%%\''">不满足</span>
                 </div>
              </div>
            </div>
          </div>
          <div class="SCb-bottom">
            <div class="SCb-title">表达式内容：</div>
            <textarea v-model="filterText"></textarea>
            <div class="Schoose-b">
              <button @click="submit(true)">确定</button>
              <button @click="submit(false)">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
<script>
    import {ref,onBeforeMount} from "vue"
    export default {
      props:['LData','RData','Filter'],
      emits:["submitt"],
      setup(props,ctx){
            let filterText =ref('')
            let filterValue =ref('')
            let defaults = ref([])
            function rowclick({row}){
              console.log(row);
                if (row.isF){
                    filterText.value=filterText.value+ row.name
                }
            }
            function submit(tf){
                let data={filterText:filterText.value,filterValue:'',update:tf}
                  ctx.emit("submitt",data)
            }
            return{
              filterText,
              defaults,
              rowclick,
                submit
            }
        }
    }
    </script>
    
    <style lang='scss' scoped>
    .Schoose {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.346);
  z-index: 990;

  input, textarea {
    outline: none;
  }

  button {
    background-color: rgba(196, 196, 196, 0.524);
    border: 1px solid rgb(145, 145, 145);
    border-radius: 3px;
    font-size: 12px;
    padding: 5px;
    color: rgba(0, 0, 0, 0.661);
  }

  .Schoose-body {
    position: absolute;
    top: 50px;
    left: 230px;
    width: 800px;
    height: 400px;
    background: rgb(195, 195, 195);
    border: 1px solid rgb(203, 203, 203);
    box-shadow: 0 0 15px rgb(96, 96, 96);
    border-radius: 5px;
    padding: 5px;

    .popuptitle {
      display: flex;
      color: rgba(54, 54, 54, 0.922);
      font-size: 14px;
      justify-content: space-between;

      .icon-xinjian {
        font-weight: 700;
      }

      .switch {
        display: flex;
        align-items: center;

        .shut {
          width: 22px;
          height: 22px;
          font-weight: 700;
          color: rgb(0, 0, 0);
          font-size: 14px;
        }
      }
    }

    .Scb {
      border: 1px solid rgb(154, 154, 154);
      height: calc(100% - 22px);

      .Scb-top {
        border: 1px solid rgb(154, 154, 154);
        height: 70%;
        display: block;

        .scbt-middle {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.757);
          background-color: rgb(212, 212, 212);
        }

        .scbt-left, .scbt-rigth {
          display: initial;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.757);
          background-color: rgb(212, 212, 212);
        }

        .tihuan {
          margin-top: 60px;
        }

        .stitle {
          padding: 0 5px;
          height: 30px;
          line-height: 30px;
        }

        .sview {
          border: 1px solid rgb(154, 154, 154);
          background-color: #fff;
          height: calc(100% - 100px);
          overflow: auto;
        }

        .sview-m {
          background-color: rgb(212, 212, 212);
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          box-sizing: border-box;
        }

        .tpesun2-m-buttons {
          border: 1px solid rgb(157, 157, 157);
          background-color: rgb(234, 234, 234);
          box-sizing: border-box;
          padding: 5px 10px;
          overflow: hidden;
          text-align: center;
           .t{ display: inline-block;cursor: default;}
          .t1{
            width: 25px;
            height: 25px;
            float: left;
            line-height: 24px;
            text-align: center;
            margin: 0 2px;
            background-color: rgba(196, 196, 196, 0.524);
            border: 1px solid rgb(145, 145, 145);
            border-radius: 2px;
          }

          .t2 {
            height: 24px;
            line-height: 24px;
            text-align: center;
            background-color: rgba(196, 196, 196, 0.524);
            border: 1px solid rgb(145, 145, 145);
            border-radius: 2px;
          }
        }

        .buttonsm-view {
          margin-top: 10px;
          width: 170px;
          border: 1px solid rgb(157, 157, 157);
          background-color: rgb(234, 234, 234);
          padding-bottom: 3px;

          .butv-t {
            padding: 5px;
          }

          textarea {
            resize: none;
            display: block;
            margin: 0 auto;
            height: 70px;
          }
        }

        .slrinput {
          display: flex;
          align-items: center;

          input {
            border: none;
            width: calc(100% - 30px);
            background-color: rgba(255, 213, 213, 0.744);
            height: 28px;
          }

          .icon-sousuo {
            width: 30px;
            height: 30px;
            text-align: center;
            background-color: #fff;
            line-height: 30px;
          }
        }

      }

      .SCb-bottom {
        height: 30%;

        .SCb-title {
          line-height: 20px;
          background-color: rgb(231, 231, 231);
          font-size: 14px;
          padding: 0 5px;
        }

        textarea {
          resize: none;
          width: 100%;
          height: calc(100% - 60px);
          font-size: 14px;
          border: 1px solid rgb(154, 154, 154);
        }

        .Schoose-b {
          text-align: center;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
